<!-- filepath: e:\Product\my-vue3-project\src\components\Layout.vue -->
<template>
  <el-container style="height: 100vh">
    <!-- 顶部 -->
    <el-header height="60px" class="layout-header">
      <div class="header-left">项目名称</div>
      <div class="header-right">
        <span>{{ username }}</span>
        <span style="margin: 0 16px">{{ currentTime }}</span>
        <el-button type="text" @click="logout">退出登录</el-button>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边菜单 -->
      <el-aside width="200px" class="layout-aside">
        <el-menu :default-active="activeMenu" router>
          <el-menu-item
            v-for="item in menus"
            :key="item.path"
            :index="item.path"
          >
            {{ item.title }}
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 内容区 -->
      <el-main class="layout-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();

const router = useRouter();
const route = useRoute();

// 假设用户名和菜单后续从后端获取
const username = ref("admin");
const currentTime = ref("");
const menus = ref([{ path: "/home", title: "首页" }]);
const activeMenu = ref(route.path);

const logout = () => {
  userStore.clear(); // 清除 token 和用户信息
  router.push("/login"); // 跳转到登录页
};

onMounted(() => {
  setInterval(() => {
    const now = new Date();
    currentTime.value = now.toLocaleString();
  }, 1000);
});
</script>

<style scoped>
.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #409eff;
  color: #fff;
  padding: 0 24px;
}
.header-right {
  display: flex;
  align-items: center;
}
.layout-aside {
  background: #f5f7fa;
}
.layout-main {
  background: #fff;
  padding: 24px;
  min-height: 100%;
}
</style>
